<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.0/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.0/js/jasny-bootstrap.min.js"></script>

<div class="row">
    <div class="col-md-8 col-md-offset-2" style="padding-bottom: 50px;" >
        <form enctype='multipart/form-data' role="form" name="banner" method="post" action="<?php echo $this->webroot?>Banner/save"  >
          <input type="hidden" name="Banner[id]" id="banner_id" value="" />
          <input type="hidden" name="Banner[banner_id]" value="" />
          <div class="row">
	          <div class="form-group col-md-4">
	            <label for="lang">Lingua:</label><br>
	            <select name="Banner[lang]" style="width:auto;" id="lang" >
	                <option value="ita" ><?php echo __("Italiano"); ?></option>
	                <option value="eng" ><?php echo __("Inglese"); ?></option>
	            </select> 
	          </div>
	          <div class="form-group  col-md-4">
	            <label for="position">Posizione:</label><br>
	            <select id="position" name="Banner[posizione]" style="width:auto;">
	                <option value="1" >A Sinistra</option>
	                <option value="2" >A Destra</option>
	                <option value="3" >In Basso</option>
	                <option value="4" >In Alto</option>
	            </select>
	          </div>
	          <div class="form-group  col-md-4">
	            <label for="use">Usa:</label><br>
	            <select id="use" name="Banner[use]" style="width:auto;">
	                <option value="F" >Form</option>
	                <option value="H" >Html</option>
	            </select>
	          </div>
          </div>

		  <div class="row">
				<div class="col-md-12">
				   <!-- Nav tabs -->
				    <ul class="nav nav-tabs">
				      <li class="active tabform"><a href="#tabform" data-toggle="tab">Form</a></li>
				      <li class="tabhtml"><a href="#tabhtml" data-toggle="tab">Html</a></li>
				    </ul>
				    <!-- Tab panes -->
				    <div class="tab-content">
						<div class="tab-pane fade in active tabform" id="tabform">

				          <div class="row">
					          <div class="form-group  col-md-12">
					            <label for="position">Seleziona un Banner:</label><br>
					            <div class="fileinput fileinput-new" data-provides="fileinput">
					              <div class="fileinput-new thumbnail" style="width:auto; height:auto;">
					                <img data-src="" alt="">
					              </div>
					              <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
					              <div>
					                <span class="btn btn-default btn-file"><span class="fileinput-new">Browse</span><span class="fileinput-exists">Change</span>
					                    <input type="file" name="BANNER"   >
					                </span>
					                <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Rimuovi</a>
					              </div>
					            </div>
					          </div>
				          </div>
				
				          <div class="row">
					          <div class="form-group col-md-12">
					            <label for="target">Target:</label><br>
					            <select id="target" name="Banner[target]" style="width:auto;">
					                <option value="0" >Interno</option>
					                <option value="1" >Esterno</option>
					            </select>
					          </div>
				          </div>
				          
				          <div class="row">
					          <div class="form-group  col-md-12">
					            <label for="link">Link:</label>
					            <input type="text" class="form-control" id="link" name="Banner[link]" value="" placeholder="Inserisci il link">
					          </div>   
				          </div>
				          
				          <div class="row">
					          <div class="form-group  col-md-12">
					            <label for="descrizione">Descrizione:</label>
					            <textarea maxlength="400" rows="5" class="form-control" id="descrizione" name="Banner[descrizione]" value="" placeholder="Inserisci la descrizione"></textarea>
					          </div>
				          </div>
							
						</div>
						<div class="tab-pane fade in tabhtml" id="tabhtml">

				          <div class="row">
					          <div class="form-group  col-md-12">
					            <label for="descrizione">Descrizione:</label>
					            <textarea maxlength="5000" rows="18" class="form-control" id="html" name="Banner[html]" placeholder="Inserisci codice html"></textarea>
					          </div>
				          </div>
							
						</div>
				    </div>
			    </div>
		  </div>

          
          
          <div class="row">
	          <div class="col-md-12 ">
	              <button type="submit" class="btn btn-primary">Salva</button>
	              <a  href="<?php echo $this->webroot?>Banner/index" class="btn">Annulla</a>
	          </div>
          </div>
         
        </form>
   </div>
  </div>
  <script>
      
    $(document).ready(
        function() { 
            $("#use").select2({
                 placeholder:"Seleziona il tipo di sorgente"
            }); 
            
            $("#position").select2({
                 placeholder:"Seleziona una posizione sulla pagina"
            }); 
            
            $("#target").select2({
                 placeholder:"Seleziona un valore"
            });

            $("#lang").select2({
                 placeholder:"Seleziona la lingua"
            });
            
            $('#banner_file').change(function() {
                
                $('#banner_path').val($(this).val());
                $('#banner_thumb').attr("src",$(this).val());
            });
            
        });
      
  </script>